<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="320px" style="background-color: rgb(238, 241, 246);height: 730px">
        <el-menu
            style="width: 300px"
            :default-active="isId"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <NavMenu :navMenus="totalList"></NavMenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <span>{{ userData.loginId }}</span>
          <el-avatar :size="50" :src="userData.photoPath" style="position: relative;bottom: -10px;"></el-avatar>
          <strong><b><a href="#" @click="logout">退出</a></b></strong>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import request from "../request.js"

import axios from 'axios'
import NavMenu from './component/eleTemplate.vue';
import cookie from 'js-cookie';
export default {
  name: "index",
  comments: "slider",
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      totalList: [],
      isId: '权限管理',
      tableData: Array(20).fill(item),
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large", "medium", "small"],
      userData: [
        {
          loginId: '',
          photoPath: '',
          id: ''

        },
      ],
      menus: []
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    /**
     * 初始化菜单栏
     */
    initialization() {
      //  console.log(this.userData.loginId)
      // console.log(this.userData.phtoPath)
      //   console.log(this.userData.id)
      console.log("userInfo:"+cookie.get("userInfo"))
      let userInfo=JSON.parse(cookie.get("userInfo"))
      this.userData.loginId=userInfo.loginId;
      this.userData.photoPath=userInfo.photoPath;
      console.log(userInfo.id)
      axios.get("http://localhost:8150/menus/queryMenuByRole/" +userInfo.id).then(data => {
        this.totalList = data.data.data
        // console.log( this.totalList)
      }).catch(e => {
        alert("错误信息为:" + e)
      });
      //退出
    },logout(){
      //清空cookie值
      // cookie.set('erpDongAn-user','',{domain:'localhost'});
      // cookie.set('userInfo','',{domain:'localhost'});
      cookie.remove('erpDongAn-user');
      cookie.remove('userInfo');
    }
  }, created() {
    this.initialization();

  },
  components: {
    NavMenu
  },
  beforeRouteEnter(to, from, next) {
    // console.log("我从哪里来",to.params.id,from)
    var self = this

    next(vm => {

      vm.isId = to.params.id

    })


  },
  watch: {
    $route(to, from) {
      this.isId = to.params.id
    }
  },
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>